.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
 }
 ol,li{
     list-style: none;
 }
 *{margin: 0;padding: 0;}
#xxx {
    
    display: block;
    position: fixed;/*给canvas一个绝对定位，不让界面在移动端浮动*/
    left: 0;
    top: 0;
}

body {
   overflow: hidden;
}

.actions {
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
}

.actions svg{
    width: 30px;
    height: 30px;
    transition: 0.3s;
    margin: 0 8px;
}

.actions svg.active{
  fill: red;
  transform: scale(1.3)
}
.colorbox{
    position: fixed;
    top: 60px;
    left: 15px;
    
}

.colorbox> li{
    width: 23px;
    height: 23px;
    box-shadow: 0 0 0.3 rgba(0,0,0, 0.25);
    margin: 10px 0;
    border-radius: 50%;
    transition: 0.3s;
}
.colorbox> li.black{
    background:black;
}
.colorbox> li.red{
    background: red;
}
.colorbox> li.yellow{
    background: yellow;
}
.colorbox> li.blue{
    background: blue;
}
.colorbox> li.active{
    width: 23px;
    height: 23px;
    box-shadow: 0 0 0.3 rgba(0,0,0, 1.25);
    margin: 10px 0;
    border-radius: 50%;
    transform: scale(1.2)
}
.size{
   position: fixed;
    top: 230px;
    left: 15px;
    
}
.size >li{
    margin: 8px 0;
}
.size >.thin{
    width:25px;
    height: 0;
    border-top: 5px solid black;
}
.size >.thick{
    width:25px;
    height: 0;
    border-top: 10px solid black;
}
